<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cjrow v-bind:ant="ant"  v-bind:ant2="value2"
			v-on:enlarge-text="ant += 1" 
			v-on:enlarge-text2="value2 += $event"></cjrow>
			
			<cjrow v-bind:ant="ant"  v-bind:ant2="value2"
			v-on:enlarge-text="onMyClick" 
			v-on:enlarge-text2="onMyClick">如果这个事件处理函数是一个方法,那么这个值将会作为第一个参数传入这个方法</cjrow>
		</div>
		
		<script type="text/javascript">
			Vue.component('cjrow',{
				props:['ant','ant2'],
				data : function(){
					return{
						anthor:'ccqx'
					}
				},
				// 内建的$emit可以用来定义内部监听.
				// 可以使用 $emit 的第二个参数来作为监听的参数传递给子组件使用.
				// 当模版中单引号和双引号都被占用,还可以用`符号作为分割符.
				// 模版中的<slot>插槽标签,可以向自定义组件子类中输入html的内容.
				template:
				`<div>
				<button type="button" 
				v-on:click="$emit('enlarge-text')" >
				{{ant}}
				</button>
				</br>
				<button type="button"
				v-on:click="$emit('enlarge-text2','s')">
				{{ant2}}
				</button>
				<slot></slot></div>`,
				
			})
			
			var vm = new Vue({
				el : "#app",
				data : {
					ant:'bruce',
					value2:'ccqx'
				},
				methods:{
					onMyClick:function(param){
						alert(param);
					}
				}
			});
			
		
			
		</script>
	</body>
</html>
